import React from 'react'
// 引入编辑器组件
import BraftEditor from 'braft-editor'
// 引入编辑器样式
import 'braft-editor/dist/index.css'
import Table from 'braft-extensions/dist/table'
import 'braft-extensions/dist/table.css'

const options = {
    defaultColumns: 3, // 默认列数
    defaultRows: 3, // 默认行数
    withDropdown: false, // 插入表格前是否弹出下拉菜单
    columnResizable: false, // 是否允许拖动调整列宽，默认false
    exportAttrString: '', // 指定输出HTML时附加到table标签上的属性字符串
    includeEditors: ['editor-id-1'], // 指定该模块对哪些BraftEditor生效，不传此属性则对所有BraftEditor有效
    excludeEditors: ['editor-id-2']  // 指定该模块对哪些BraftEditor无效
}



export default class Braft extends React.Component {

    state = {
        editorState: BraftEditor.createEditorState(this.props.data), // 设置编辑器初始内容
        outputHTML: null
    }

    // componentDidMount () {
    //     this.isLivinig = true
    //     // 3秒后更改编辑器内容
    //     setTimeout(this.setEditorContentAsync, 3000)
    // }

    componentWillUnmount () {
        this.isLivinig = false
    }

    handleChange = (editorState) => {
        this.setState({
            editorState: editorState,
            outputHTML: editorState.toHTML()
        })
        this.props.onChange(this.state.outputHTML)
    }

    setEditorContentAsync = () => {
        this.isLivinig && this.setState({
            editorState: BraftEditor.createEditorState(this.props.data)
        })
    }

    render () {
        BraftEditor.use(Table(options))
        const { editorState, outputHTML } = this.state

        return (
            <div>
                <div className="editor-wrapper">
                    <BraftEditor
                        value={editorState}
                        onChange={this.handleChange}
                    />
                </div>
                {/*<h5>输出内容</h5>*/}
                {/*<div className="output-content">{outputHTML}</div>*/}
            </div>
        )

    }

}
